
<style scoped>
.table th,.table td{
    text-align: center;
}
.left-part,.right-part{
    height: 650px;
    overflow: auto;
    float: left;
}
.left-part{
    width: 30%;
    background-color: #fff;
    border-radius: 10px 0 0 10px;
}
.right-part{
    width: 70%;
    background-color: #fff;
    border-radius: 0px 10px 10px 0;
}

.left-part h3{
    padding-left: 20px;
    color: #fff;
    font-size: 18px;
    height: 60px;
    line-height: 60px;
    background-color: #9E3110;
}
.left-part ul li{
    height: 84px;
    margin: 8px 0;
    cursor: pointer;
}
.left-part ul li:hover{
    border: 2px solid #1DC499;
}
/*点击套餐样式*/
.left-part ul li.active{
    color: #1DC499;
}
.left-part ul li .msg span.active{
    color: #1DC499;
}
.left-part ul li.border{
    border: 2px solid #1DC499;
}
.left-part ul li img{
    width: 80px;
    height: 80px;
    float: left;
}
.left-part ul li .msg{
    float: right;
    width: 185px;
    padding-top: 18px;
}
.left-part ul li .msg span{
    display: block;
}
.left-part ul li .msg span.title{
    width: 78%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.left-part ul li .msg span.price{
    color: #f00;
}

.right-part{
    padding: 20px;
}
.right-part .meal-title{
    color: #00BB89;
    text-indent: 10px;
    margin-bottom: 5px;
    background: url(../assets/img/orangered-border.png) no-repeat left center;
}
.right-part .detail-title{
    height: 180px;
    background: #FAFAFA;
}
.right-part .detail-title dl dt{
    float: left;
    width: 40%;
}
.right-part .detail-title dl dd{
    float: right;
    width: 60%;
}
.right-part .detail-title dl dt img.title-img{
    width: 200px;
    height: 180px;
    margin-right: 10px;
}
.right-part .detail-title dl dd p{
    margin: 10px;
}
.right-part .detail-title dl dd span.item-property{
    color: #1FC59A;
}
.right-part .detail-title dl dd span.price{
    color: #f00;
    font-size: 24px;
    display: block;
    margin-top: 10px;
}

.right-part .select-date{
    padding: 25px 0;
    margin: 10px 0;
    background: #FFFCF4;
}
.right-part .select-date label,.right-part .select-date input{
    display: inline-block;
    height: 30px;
    line-height: 30px;
}
.right-part .select-date input{
    outline: none;
    border: 1px solid #ccc;
    height: 20px;
    text-indent: 10px;
    background: url(../assets/img/calendar.png) no-repeat right center;
}
.right-part .select-date button{
    border-radius: 16px;
    background-color: #FB8E24;
    text-align: center;
    width: 170px;
    height: 30px;
    line-height: 30px;
    float: right;
    margin-right: 30px;
    color: #fff;
}
.right-part .meal-item table td.ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#medical-time{
    text-align: center;
}
#medical-time + button{
    margin-top: 4px;
    padding: 2px 5px;
}
.opera button{
    border-radius: 16px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    float: right;
    margin-right: 20px;
}
.opera button:first-child{
    background-color: #42B27A;
    color: #fff;
}
.opera button:last-child{
    background-color: #fff;
}

.nodate{
    color: #f00;
    font-size: 20px;
    text-align: center;
    line-height: 84px;
}

span.meal-date,span.meal-type{
    display: block;
    color: #929292;
    font-size: 14px;
    text-indent: 24px;
}
span.meal-date{
    background: url(../assets/img/date.png) no-repeat -5px center;
    background-size: 24px;
}
span.meal-type{
    background: url(../assets/img/male.png) no-repeat left center;
    background-size: 14px;
}

</style>

<template>
    <div class="appoint">
        <!-- 预约套餐 -->
        <div class="left-part" v-show="!isAppo">
            <h3>我的预约记录</h3>
            <div class="left-list">
                <ul>
                    <li v-for="($index,item) in setMealList" @click="selectSetMeal($index,item)" :class="{'border':$index==clickIndex}">
                        <img :src="headimg" alt="Not Find" />
                        <div class="msg">
                            <span v-text="item.tcmc" :class="['title',{'active':$index==clickIndex}]"></span>
                            <span class="meal-date" v-text="item.date.substr(0,10)"></span>
                            <span class="meal-type" v-text="item.typename"></span>
                        </div>
                    </li>
                    <li class="nodate" v-if="noDate">未查询到有预约记录！</li>
                </ul>
            </div>
        </div>
        <!-- 预约详情 -->
        <div class="right-part">
            <div class="meal-item">
                <h3 class="meal-title" v-text="setMealName"></h3>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th class="col-md-4">序号</th>
                            <th class="col-md-4">项目名称</th>
                            <th class="col-md-4">预约日期</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="($index,item) in setMealItemDetail">
                            <td class="col-md-4" v-text="item.xmbh"></td>
                            <td class="col-md-4" v-text="item.xmmc"></td>
                            <td class="col-md-4 ellipsis" v-text="item.date | convertDate" title="{{item.date | convertDate}}"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
import 'assets/reset.css'
import Public from 'assets/public.js'
var headimg = require("assets/img/cs11.jpg");
export default {
    data() {
            return {
                headimg: headimg,
                setMealList: [],
                //点击获取索引值
                clickIndex: 0,
                //套餐名称
                setMealName: '',
                //获取套餐项目详情
                setMealItemDetail: {},
                //无预约记录
                noDate: false
            }
        },
        ready() {
            //获取套餐列表
            //this.getSetMealList();
        },
        filters: {
            'convertDate': function(dt){
                let date = new Date(dt);
                let month = date.getMonth() < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1;
                let day= date.getDate() < 10 ? '0'+date.getDate() : date.getDate();
                    date = date.getFullYear()+'-'+month+'-'+day;
                return date;
            }
        },
        methods: {
            //获取套餐列表
            getSetMealList (mpi) {
                $.when(Public.commonajax('coms.physicalExamService','getAppointMent','["'+mpi+'"]')).done(res=> {
                    if(res.code == 200){
                        this.noDate = false;
                        this.setMealList = res.body;
                        //默认渲染首条套餐
                        this.selectSetMeal(this.clickIndex,this.setMealList[0]);
                    }else{
                        this.noDate = true;
                    }
                });
            },

            //获取套餐项目详情
            selectSetMeal (index,item) {
                this.clickIndex = index;
                this.setMealName = item.tcmc;
                $.when(Public.commonajax('coms.physicalExamService','getAppointMentDeatils','['+item.num+']')).done(res=> {
                    this.setMealItemDetail = res.body;
                });
            }
        }
}
</script>
